<template>
	<view>
		<view class="container">
			<uni-search-bar @confirm="search" clearButton="auto" cancelButton="none" />
			<uni-segmented-control :values="tabItems" style-type="text" @clickItem="onClickItem" />
			<view class="mian">
				<view class="left">
					<view class="routerItem" v-for="(item,index) in activateChildren" :key="index">
						<view @click="onClickRoute(item)">{{item.text}}</view>
					</view>
				</view>
				<view class="right">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single" :border="false"
						@change="confirmSingleChange" />

					<uni-card :title="item.dName" :isFull="true" :sub-title="item.dPost" extra="查看详情"
						:thumbnail="item.avatar" @click="queryDcDetail(item)" v-for="(item,index) in sectionData"
						:key="index">
						<text class="uni-body">
							<view class="text">科室:{{item.dSection}}</view>
							<view class="text">挂号费用/元:{{item.dPrice}}</view>
						</text>
					</uni-card>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findByTime,
		findOrderTime,
		addOrder
	} from "@/api/system/registe";
	export default {
		data() {
			return {
				submitParams: {
					pId: uni.getStorageSync('pid'),
					dId: '',
					oStart: '',
				},
				initTimes: [], //返回可选时间集合
				timeRegiste: '', //当前选择时间段
				single: '',
				datetimerange: [],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				sectionData: [],
				subjectName: "",
				value: ['0'],
				accordionVal: '5',
				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
				extraIcon: {
					color: '#4cd964',
					size: '26',
					type: 'image'
				},
				classes: '1-2',
				tabItems: [],
				dataTree: [{
						text: "内科",
						value: "1-0",
						children: [{
								text: "神经内科",
								value: "1-1"
							},
							{
								text: "呼吸与危重症医学科",
								value: "1-1"
							},
							{
								text: "内分泌科",
								value: "1-1"
							},
							{
								text: "消化内科",
								value: "1-1"
							},
							{
								text: "心血管内科",
								value: "1-1"
							},
							{
								text: "肾内科",
								value: "1-1"
							},
							{
								text: "发热门诊",
								value: "1-1"
							},
						]
					},
					{
						text: "外科",
						value: "2-0",
						children: [{
								text: "手足外科",
								value: ""
							},
							{
								text: "普通外科",
								value: ""
							},
							{
								text: "肛肠外科",
								value: ""
							},
							{
								text: "神经外科",
								value: ""
							},
							{
								text: "泌尿外科",
								value: ""
							},
							{
								text: "骨科",
								value: ""
							},
							{
								text: "烧伤整形外科",
								value: ""
							},
						]
					},
					{
						text: "妇产科",
						value: "3-0",
						children: [{
								text: "妇科",
								value: ""
							},
							{
								text: "产科",
								value: ""
							},
						]
					},
					{
						text: "儿科",
						value: "4-0",
						children: [{
								text: "儿科",
								value: ""
							},
							{
								text: "儿童保健科",
								value: ""
							},
						]
					},
					{
						text: "五官科",
						value: "5-0",
						children: [{
								text: "耳鼻咽喉科",
								value: ""
							},
							{
								text: "眼科",
								value: ""
							},
							{
								text: "口腔科",
								value: ""
							},
						]
					},
					{
						text: "中医科",
						value: "6-0",
						children: [{
							text: "中医科",
							value: ""
						}, ]
					},
					{
						text: "其他",
						value: "7-0",
						children: [{
								text: "康复医学科",
								value: ""
							},
							{
								text: "急诊科",
								value: ""
							},
							{
								text: "皮肤性病科",
								value: ""
							},
							{
								text: "功能科",
								value: ""
							},
						]
					}
				],
				activateChildren: [], //当前选中科室
			}
		},
		created() {
			this.tabItems = this.dataTree.map(item => item.text)
			console.log(this.tabItems, 'tabItems-------')
			// 默认 当天 第一个科室
			const newDate = new Date()
			this.single = `${newDate.getFullYear()}-${newDate.getMonth()+1}-${newDate.getDate()}`
			this.activateChildren = this.dataTree[0].children
			this.section = this.activateChildren[0].text
			this.subjectName = "科室：" + this.section + " 挂号时间：" + this.single;
			findByTime(this.single, this.section).then(response => {
				console.log("值班医生列表~~~~~~~~~~~~~~~~~~~~~~~~" + JSON.stringify(response))
				this.sectionData = response.data.map((item) => item.doctor);
			})
		},
		methods: {
			//选择科室
			onClickItem(e) {
				this.activateChildren = this.dataTree[e.currentIndex].children
			},
			// 选择细分科室
			onClickRoute(e) {
				console.log(e, '点击细分')
				this.subjectName = "科室：" + e.text + " 挂号时间：" + this.single;
				this.section = e.text;
				findByTime(this.single, this.section).then(response => {
					console.log("值班医生列表onClickRoute" + JSON.stringify(response.data))
					this.sectionData = response.data.map((item) => item.doctor);
					if (this.sectionData.length == 0) {
						uni.showToast({
							icon: "none",
							title: "无值班医生当值",
							duration: 1000
						})
					}
				})
			},
			//搜索栏
			search() {
				console.log("fdsfd")

			},
			queryDcDetail(item) {
				item.single = this.single;
				uni.navigateTo({
					url: '/pages/work/registe/registeDetail?params=' + JSON.stringify(item),
				})
			},

			change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
			},
			changeLog(e) {},
			confirmSingleChange(e) {
				console.log('confirmSingleChange事件:', e);
				this.single = e;
				findByTime(e, this.section).then(response => {
					this.sectionData = response.data.map((item) => item.doctor);
					console.log("值班医生列表" + JSON.stringify(this.sectionData))
				})
			},

			// add() {
			// 	this.submitParams.oStart = this.single + " " + this.timeRegiste;
			// 	console.log("参数----" + JSON.stringify(this.submitParams))
			// 	addOrder(this.submitParams).then(res => {
			// 		uni.showToast({
			// 			icon:"success",
			// 			duration:1000,
			// 			title:"挂号成功"
			// 		})
			// 	})
			// },
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			isTimeAfterTarget(timeString) {
				// 判断时间是否超过timeString(入参格式如：09:30)
				const currentTime = new Date();

				// 解析传入的目标时间字符串，获取小时和分钟
				const [targetHour, targetMinute] = timeString.split(":");

				// 设置要比较的时间
				const targetTime = new Date();
				targetTime.setHours(targetHour);
				targetTime.setMinutes(targetMinute);
				targetTime.setSeconds(0);

				// 比较当前时间是否超过了目标时间
				return currentTime > targetTime;
			},
			async change(e) { //手风琴展开与收起
				if (!e) return
				const id = this.sectionData[e].dId
				this.submitParams.dId = id
				console.log("params---" + JSON.stringify(this.sectionData[e]))
				const orderDate = this.single
				const params = id + orderDate
				console.log("params---" + params)
				findOrderTime(params).then(res => {
					console.log(res, 'res')

					const date = new Date(this.orderDate);
					const today = new Date();
					const isToday =
						date.getFullYear() === today.getFullYear() &&
						date.getMonth() === today.getMonth() &&
						date.getDate() === today.getDate();
					var array = [];
					if (!this.isTimeAfterTarget("09:30") || !isToday) {
						array.push({
							value: "08:30-09:30",
							text: "08:30-09:30  余号 1"
						});
					}
					if (!this.isTimeAfterTarget("10:30") || !isToday) {

						array.push({
							value: "09:30-10:30",
							text: "09:30-10:30  余号 1"
						});
					}
					if (!this.isTimeAfterTarget("11:30") || !isToday) {

						array.push({
							value: "10:30-11:30",
							text: "10:30-11:30  余号 1"
						});
					}
					if (!this.isTimeAfterTarget("15:30") || !isToday) {

						array.push({
							value: "14:30-15:30",
							text: "14:30-15:30  余号 1"
						});
					}
					if (!this.isTimeAfterTarget("16:30") || !isToday) {

						array.push({
							value: "15:30-16:30",
							text: "15:30-16:30  余号 1"
						});
					}
					if (!this.isTimeAfterTarget("17:30") || !isToday) {

						array.push({
							value: "16:30-17:30",
							text: "16:30-17:30  余号 1"
						});
					}
					this.initTimes = array;
				})

			},
			onnodeclick(e) {


			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			timeRegisteChange(e) {
				console.log("e:", e);
			}
		}
	}
</script>

<style>
	.example-body {
		background-color: #fff;
		padding: 10px;
	}

	.itemTagBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.mian {
		display: flex;
		justify-content: space-between;
		min-height: 100vh;
		/* height: auto; */
	}

	.left {
		width: 200rpx;
		background-color: #e4e4e4;
	}

	.routerItem {
		padding: 20rpx;
		border-bottom: 1rpx solid #afafaf;
	}

	.right {
		flex: 1;
	}

	.container {
		background-color: #fff;
	}

	.content {
		padding: 15px;
		height: 100%;
	}

	.aaa {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
	}

	.aaa .left {
		width: 100%;
		background-color: #fff;
	}

	.right {
		width: 100%;

	}

	::v-deep .selectTimes {
		width: 100%;
		position: relative;
		z-index: 999;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}

	,

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	/* /deep/ .uni-stat__select {
		min-width: 300rpx !important;
		background-color: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.uni-select__input-text {
			width: 120rpx !important;
		}
	} */
</style>